<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PRO请求</title>
  <!-- title前面的图标 -->
  <link rel="shortcut icon" type="image/x-icon" href="public/images/huobi.png" />
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 样式表-->
  <link href="public/css/index.css" rel="stylesheet">
  <link href="public/css/request.css" rel="stylesheet">
  <script src="public/js/jquery.min.js"></script>
  <!-- Vue的配置 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>

<body>
  <!-- 头部内容 -->
  <div class="row clearfix">
    <div class="col-md-12 column">
      <header class="header">
        <!-- logo图片 -->
        <div class="logo">
          <img src="public/images/logo.png" />
        </div>
        <div class="nav-wrapper">
          <span class="icon-menu"></span>
          <nav class="user-nav" id="user-nav">
            <a class="submit-a-request" href="SubmitRequests.html">提交请求</a>
          </nav>
        </div>
      </header>
    </div>
  </div>
  <!-- 中间部分内容 -->
  <main id="main">
    <div class="container-divider"></div>
    <div class="container">
      <nav class="sub-nav">
        <ol class="breadcrumbs">
          <li title="帮助中心">
            <a href="index.html">帮助中心</a>
          </li>
          <li title="提交请求">
            提交请求
          </li>
        </ol>
        <div role="search" class="search" accept-charset="UTF-8">
          <input name="utf8" type="hidden" value="✓">
          <input type="search" name="query" id="query" placeholder="搜索" autocomplete="off"></div>
      </nav>
      <h1>
        提交请求
      </h1>
      <div class="form">
        <form id="new_request" class="request-form" data-form="" data-form-type="request" action=""
          accept-charset="UTF-8" method="">
          <input name="utf8" type="hidden" value="✓">
          <input type="hidden" name="authenticity_token" value="">
          <div class="form-field select optional request_ticket_form_id" id="">
            <label for="request_issue_type_select">Please
              choose your issue below</label>
            <select onchange="qiehuan(this.value)"  id="selecttype" aria-label="Please choose your issue below"
              autofocus="autofocus">
              <option data-url="" value="1">-</option>
              <option data-url="" id="pro" name="pro" value="PRO工单" selected="selected">PRO工单</option>
              <option data-url="" id="otc" name="otc" value="OTC工单">OTC工单</option>
            </select>
            <!-- <select id="request_issue_type_select" aria-label="Please choose your issue below"
              autofocus="autofocus">
              <option value="3">-</option>
              <option :value="v.RequestTypeId" v-for="v in Request">{{v.RequestTypeName}}</option>
            </select> -->
          </div>
          <div class="form-field "><label for="request_anonymous_requester_email">电邮地址</label>
            <input type="text" name="email" id="email" aria-required="false" autocomplete="off">
          </div>
          <!-- <div class="form-field select optional request_ticket_form_id">
            <label for="request_issue_type_select">问题分类</label>
            <select onchange="" id="request_issue_type_select" autofocus="autofocus">
              <option data-url="" value="1" selected="selected">-</option>
              <option data-url="" value="2">HBG</option>
              <option data-url="" value="3">OTC</option>
              <option data-url="" value="4">HBDM</option>
            </select></div>  -->
          <div class="form-field select optional request_ticket_form_id" >
            <label for="request_anonymous_requester_email">问题分类<span class="span">*</span></label>
            <select aria-label="Please choose your issue below" id="problemDrop" autofocus="autofocus">
              <option value="1" >-</option>
            </select>
          </div>
          <div class="form-field   required  request_description" id="desc">
            <label id="request_description_label" for="request_description">描述</label>
            <textarea name="request[description]" id="description" aria-required="true"
              aria-describedby="request_description_hint" aria-labelledby="request_description_label"></textarea>
            <p id="request_description_hint">请提供您的火币账户及问题详细描述，工单会在24小时内回复，谢谢配合！Please submit your Huobi account and the
              details of your request. The ticket will be replied in 24 hours. Thanks!</p>
          </div>
          <div class="form-field">
            <label for="request-attachments" id="other">附件</label>
            <div id="upload-dropzone" class="upload-dropzone">
              <input type="file" multiple="true" id="request-attachments" data-fileupload="true"
                data-dropzone="upload-dropzone" data-error="upload-error" data-create-url=""
                data-name="request[attachments][]" data-pool="request-attachments-pool" data-delete-confirm-msg="">
              <span>
                <a>添加文件</a>或把文件放置到这里
              </span>
            </div>
            <div id="upload-error" class="notification notification-error notification-inline" style="display: none;">
              <span data-upload-error-message=""></span>
            </div>
            <ul id="request-attachments-pool" class="upload-pool" data-template="upload-template"></ul>
            <script type="text/html" id="upload-template">
              <li class="upload-item" data-upload-item>
                <a class="upload-link" target="_blank" data-upload-link></a>
                <p class="upload-path" data-upload-path></p>
                <p class="upload-path" data-upload-size></p>
                <p data-upload-issue class="notification notification-alert notification-inline" aria-hidden="true"></p>
                <span class="upload-remove" data-upload-remove></span>
                <div class="upload-progress" data-upload-progress></div>
                <input type="hidden">
              </li>
            </script>
          </div>
          <footer><input type="button" onclick=" Submitgongdan()" class="buttonss" name="commit" value="提交">
            <script>
              var invisibleRecaptchaSubmit = function () {
                var closestForm = function (ele) {
                  var curEle = ele.parentNode;
                  while (curEle.nodeName !== 'FORM' && curEle.nodeName !== 'BODY') {
                    curEle = curEle.parentNode;
                  }
                  return curEle.nodeName === 'FORM' ? curEle : null
                };
                var eles = document.getElementsByClassName('g-recaptcha');
                if (eles.length > 0) {
                  var form = closestForm(eles[0]);
                  if (form) {
                    form.submit();
                  }
                }
              };
            </script>
            <div data-size="invisible" data-sitekey="" data-badge="inline" data-callback="invisibleRecaptchaSubmit"
              class="g-recaptcha " ui="invisible">
              <div class="grecaptcha-badge" data-style="inline"
                style="width: 256px; height: 60px; box-shadow: gray 0px 0px 5px;">
                <div class="grecaptcha-logo">
                  <iframe
                    src="https://www.recaptcha.net:443/recaptcha/api2/anchor?ar=1&amp;k=6Ldm2WgUAAAAAJ0tKm0JAq-vewBfYR2yhQmPknA2&amp;co=aHR0cHM6Ly9odW9iaWdsb2JhbC56ZW5kZXNrLmNvbTo0NDM.&amp;hl=zh-CN&amp;v=v1560753160450&amp;size=invisible&amp;badge=inline&amp;cb=4yps5m4gyu74"
                    width="256" height="60" role="presentation" name="" frameborder="0" scrolling="no"
                    sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe>
                </div>
                <div class="grecaptcha-error"></div><textarea id="g-recaptcha-response" name="g-recaptcha-response"
                  class="g-recaptcha-response"
                  style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
              </div>
            </div>
          </footer>
        </form>
      </div>
    </div>
  </main>
  <footer class="footer">
    <div class="footer-inner">
      <a title="主页" href="#">帮助中心</a>
      <!-- 语言内容 -->
      <div class="footer-language-selector">
        <div class="dropdown language-selector" aria-haspopup="true">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <div class="btn-group dropup">
                <a class="yuyan" data-toggle="dropdown" style="color:#4f6d8c ;border: none">简体中文<img
                    src="public/images/xiangxia.svg" /></a>
                <ul class="dropdown-menu" style="margin-left: -50px;">
                  <li>
                    <a href="#"> Deutsch</a>
                  </li>
                  <li>
                    <a href="#"> English (US)</a>
                  </li>
                  <li>
                    <a href="#">Español</a>
                  </li>
                  <li>
                    <a href="#"> Français</a>
                  </li>
                  <li>
                    <a href="#">日本語</a>
                  </li>
                  <li>
                    <a href="#">한국어</a>
                  </li>
                  <li>
                    <a href="#">Português</a>
                  </li>
                  <li>
                    <a href="#"> Русский</a>
                  </li>
                  <li>
                    <a href="#"> Türkçe</a>
                  </li>
                  <li>
                    <a href="#">Tiếng Việt</a>
                  </li>
                  <li>
                    <a href="#">繁體中文</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>

<script type="text/javascript">
  function qiehuan(obj) {
    var pro = document.getElementById("pro").value;
    var otc=document.getElementById("otc").value;
    if (obj == pro) {
      location.href = "PRO.html";
    }
    if (obj == otc) {
      location.href = "OTC.html";
    }
    if (obj == 1) {
      location.href = "SubmitRequests.html";
    }
  }
  $(function () {
    //工单问题分类
    gongdan();
  })

  function gongdan() {
    $.ajax({
      url: "http://192.168.137.1:5001/api/values/WorkCategory",
      type: "post",
      dataType: "json",
      success: function (result) {
        $("#problemDrop").html("");
        $("#problemDrop").append("<option>-</option>");
        for (var i = 0; i < result.length; i++) {
          $("#problemDrop").append("<option value='" + result[i].pno + "'>" + result[i].pname + "</option>");
        }
      },
      error: function () {
        // alert("执行失败！");
      }
    })
  }
  $("body").on("change", "#problemDrop", function (param) {

    var name = param.target.value;
    if (name == "-1") {
      gongdan();
      return;
    }
    if (name <= 3) {
      $.ajax({
        url: "http://192.168.137.1:5001/api/values/GetWorkChidren",
        contentType: "application/json; charset=utf-8",
        data: {
          "id": name
        },
        type: "get",
        dataType: "json",
        success: function (result) {
          $("#problemDrop").html("");
          $("#problemDrop").append("<option value='-1'>返回</option>");
          for (var i = 0; i < result.length; i++) {
            $("#problemDrop").append("<option value='" + result[i].pno + "'>" + result[i].pname +
           "</option>");
          }
        },
        error: function () {
          // alert("执行失败！");
        }
      })
    }
  })
  //提交工单
  function Submitgongdan() {
    var url= UpladFile();
    var type = $("#selecttype").val(); //工单
    var email = $("#email").val(); //邮件地址
    var question = $("#problemDrop").val(); //问题分类
    var description = $("#description").val(); //描述
    var dats={
        "WOname": type,
        "Email": email,
        "Pno": question,
        "Describe": description,
        "Enclosure":url
      }
    $.ajax({
      url: "http://192.168.137.1:5001/api/values/WorkOrder",
      contentType: "application/json; charset=utf-8",
      type: "post",
      data:JSON.stringify(dats),
      dataType: "json",
      success: function (result) {
        data: result
      },
      error: function (res) {
        // alert("执行失败！");
      }
    })
  }

  // 上传文件
  function UpladFile() {
    var url="";
    var fileObj = document.getElementById("request-attachments").files[0]; // 获取文件对象
    var FileController = "http://192.168.137.1:5001/api/values/UpfileImage"; // 接收上传文件的后台地址 
    // FormData 对象
    var form = new FormData();
    //form.append("author", "hooyes"); // 可以增加表单数据
    form.append("file", fileObj); // 文件对象
    // XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function (data) {
      url= data.currentTarget.response;
      //alert("上传完成!");
    };
    xhr.send(form);
    return url;
  }



  var query; //定义全局变量
  // 搜索enter键按下事件
  $('#query').keydown(function () {
    if (event.keyCode == "13") {
      //获取文本框里面的值
      query = $("#query").val();
      location.href = "search.html#" + query;

    }
  })
</script>

</html>